<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
import {selectAttractionsById} from "@/api/yy/AttractionsHome.js";
import router from "@/router/index.js";


//根据路由截取景点id


//根据景点id查询景点信息
const atrra= ref({
  id:'',
  name:'',
  introduce:'',
  detailedAddress:'',
  price:'',
  image:''
})
//根据景点id查询景点信息
const getAttractions = async ()=>{
  const route = useRoute();
  const id = route.query.id;
  const res = await selectAttractionsById(id);
  atrra.value = res.data.data;
  console.log(res)
  console.log(atrra.value)
}
//带着atrra跳转到订单页
// const router = useRouter();
// const toOrder = ()=>{
//   router.push({
//     path:'/JDdingdan',
//     query:{
//       atrra:atrra.value
//     }
//   })
// }

const toAttraction = (id)=>{
  router.push({path:'/JDdingdan',query:{id:id}})
}

onMounted(()=>{
  getAttractions();
})

</script>

<template>
<div>
  <div style="width: 1200px;height: 400px;background-color: white;margin: 0 auto;">
    <div style="width: 500px;height: 400px;float: left;display: inline-block;">
      <img :src="atrra.image" style="width: 450px;height: 350px;margin-top: 25px;margin-left: 25px;border-radius: 5px">
    </div>
    <div style="width: 700px;height: 400px;float: left;display: inline-block;">
      <h1 style="margin-left: 45px;margin-top: 50px;font-size: 30px">
        {{atrra.name}}
        <span style="display:inline-block;color: red;font-size: 15px;font-weight: 300">AAAAA景区</span>
      </h1>
      <p style="margin-top: 40px;margin-left: 45px;color:#999999;">{{atrra.introduce}}</p>
      <p style="margin-top: 40px;margin-left: 45px">景点地址： {{atrra.detailedAddress}} </p>
      <p style="margin-top: 40px;margin-left: 45px">开放时间；07:30-17:00开放（16:00停止入园）</p>
      <div style="width: 188px;height: 90px;background-color: #FF7800;position: relative;right: -518px;top: -193px;border-radius: 50px 5px 5px 50px" @click="toAttraction(atrra.id)">
        <h1 class="jiage1"><span>￥</span>{{atrra.price}}<span>起</span></h1>
        <p style="float: right;margin-top:1px;margin-left:4px;font-weight:300;color: #FFD4BE;padding-right: 30px">票面价：￥60</p>
      </div>
    </div>
  </div>




  <div style="width: 1200px;height: 326px;margin: 0 auto;margin-top: 20px;padding-top:20px;background:url(https://img1.40017.cn/cn/s/2020/pc/logo/scenery_api_bg.png?v=2)">
    <h1 style="text-align: center;">请使用手机扫码购票享优惠</h1>
    <div class="saoma">
      <img src="https://pic5.40017.cn/i/ori/1BHUB3J3DjO.png" alt="">
      <span style="width: 46px;height: 46px;background-color: #BAEBDF;color: #009182;font-size: 25px;border-radius: 100px;text-align: center;margin-top: 72px">或</span>
      <img src="" alt="">
    </div>
  </div>


<!--  景点介绍顾客点评-->
  <div style="width: 1200px;margin: 0 auto">
<!--    景点介绍-->

    <div style="width:220px;height: 858px;float: right">
      <h3 style="background-color: #8A9CAA;color: white;font-weight: 300">周边推荐</h3>
      <ul>
        <li style="width: 220px;height: 197px">
          <p style="margin-top: 10px">
            <img src="https://pic5.40017.cn/i/ori/1gmPtRY8h0s_150x150_00.jpg" alt="" width="220px"height="130px">
          </p>
          <p style="font-weight: 200;color: rgba(43,43,43,0.79)">嘉元部落</p>
          <p>
            <span style="font-weight: 200;color:#FF6600;font-size: 11px;">￥</span>
            <span style="font-weight: 200;color:#FF6600;font-size: 19px;">0</span>
            <span style="font-weight: 200;color: rgba(43,43,43,0.79);font-size: 13px;">起</span>
            <span style="display:inline-block;color:white; width: 80px;height: 22px;background-color:#FF6600;font-weight: 200;font-size: 13px;
             text-align: center;line-height: 22px;margin-left: 10px;float: right;border-radius: 3px;
            ">去看看</span>
          </p>
        </li>
        <li style="width: 220px;height: 197px">
          <p style="margin-top: 10px">
            <img src="https://pic5.40017.cn/03/000/5e/91/rB5oQFx83gmAOQa7AAGM3vsM5A0113_150x150_00.jpg" alt="" width="220px"height="130px">
          </p>
          <p style="font-weight: 200;color: rgba(43,43,43,0.79)">罗山国家森林公园</p>
          <p>
            <span style="font-weight: 200;color:#FF6600;font-size: 11px;">￥</span>
            <span style="font-weight: 200;color:#FF6600;font-size: 19px;">0</span>
            <span style="font-weight: 200;color: rgba(43,43,43,0.79);font-size: 13px;">起</span>
            <span style="display:inline-block;color:white; width: 80px;height: 22px;background-color:#FF6600;font-weight: 200;font-size: 13px;
             text-align: center;line-height: 22px;margin-left: 10px;float: right;border-radius: 3px;
            ">去看看</span>
          </p>
        </li>
        <li style="width: 220px;height: 197px">
          <p style="margin-top: 10px">
            <img src="https://pic5.40017.cn/03/000/98/22/rB5oQFxBNrGANBzJAASqNShyDxs545_150x150_00.jpg" alt="" width="220px"height="130px">
          </p>
          <p style="font-weight: 200;color: rgba(43,43,43,0.79)">龙口动植物园</p>
          <p>
            <span style="font-weight: 200;color:#FF6600;font-size: 11px;">￥</span>
            <span style="font-weight: 200;color:#FF6600;font-size: 19px;">0</span>
            <span style="font-weight: 200;color: rgba(43,43,43,0.79);font-size: 13px;">起</span>
            <span style="display:inline-block;color:white; width: 80px;height: 22px;background-color:#FF6600;font-weight: 200;font-size: 13px;
             text-align: center;line-height: 22px;margin-left: 10px;float: right;border-radius: 3px;
            ">去看看</span>
          </p>
        </li>
        <li style="width: 220px;height: 197px">
          <p style="margin-top: 10px">
            <img src="https://pic5.40017.cn/03/000/dd/39/rB5oQFx9-EuAY8mTAAMtGC4G8HI238_150x150_00.jpg" alt="" width="220px"height="130px">
          </p>
          <p style="font-weight: 200;color: rgba(43,43,43,0.79)">架旗山游乐园</p>
          <p>
            <span style="font-weight: 200;color:#FF6600;font-size: 11px;">￥</span>
            <span style="font-weight: 200;color:#FF6600;font-size: 19px;">0</span>
            <span style="font-weight: 200;color: rgba(43,43,43,0.79);font-size: 13px;">起</span>
            <span style="display:inline-block;color:white; width: 80px;height: 22px;background-color:#FF6600;font-weight: 200;font-size: 13px;
             text-align: center;line-height: 22px;margin-left: 10px;float: right;border-radius: 3px;
            ">去看看</span>
          </p>
        </li>
      </ul>
    </div>
    <div style="width:955px;background-color: white;display: inline-block">
      <h1 style="margin-top: 10px">景点介绍</h1>

      <div style="width: 874px;margin: 0 auto">
        <div style="width: 800px;margin-top: 20px" v-for="item in atrra.lists">
          <img :src="item.image" alt="" width="800px" height="475px">
          <p style="font-size: 15px">{{item.content}}</p>
        </div>
<!--        <div style="width: 800px;margin-top: 20px">-->
<!--          <img src="https://pic5.40017.cn/i/ori/1gtuNCgYbpC.png" alt="" width="800px" height="475px">-->
<!--          <p style="font-size: 15px">南山大佛和南山药师玉佛为千年古刹添新颜，打造出祈福礼佛圣地；以历史文化为经、吉祥-->
<!--            文化为纬建设的历史文化园，融合多种文化与园林艺术，宛如鲜活中国通史，全面展现中华文明多彩风貌，是青少年研学旅行等活动的理想之地 。 </p>-->
<!--        </div>-->
<!--        <div style="width: 800px;margin-top: 20px;margin-bottom: 40px">-->
<!--          <img src="https://pic5.40017.cn/i/ori/1gtuMKmjRFS.png" alt="" width="800px" height="475px">-->
<!--          <p style="font-size: 15px">南山旅游景区先后获得全国工农业旅游示范点、美丽中国十佳旅游景区、中国自驾目的地、山东优质品牌、山东省文明旅游示范-->
<!--            单位、全省中小学生研学实践教育基地、烟台市青少年爱国主义教育基地等荣誉称号，打造了 “福寿南山，祈福圣地” 旅游文化品牌。 </p>-->
<!--        </div>-->

      </div>
    </div>



    <div>

    </div>
  </div>




</div>
</template>


<style scoped lang="less">
.jiage1 span{font-size: 15px;color: white;font-weight: 300}
.jiage1{font-size: 40px;color: white;font-weight: 900;float: right;margin-top: -2px;margin-right: 10px;padding-right: 20px}
.saoma{
  width: 600px;
  height: 200px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  img{
    width: 207px;
    height: 197px;
  }
}

</style>